<template>
  <div class="search">
    <div class="center-box">
      <div class="gg">
        <div class="left">
          <p class="name">
            <img src="@/assets/images/logo.020e864.png" alt="">
            <span>找标书找模板定制标书，就来标小清!</span>
          </p>
          <p class="tip">
            <span>----专业对接，工程类专业造价师，进行一对一对接！</span>
          </p>
        </div>
        <div class="right"></div>
      </div>
      <div class="box-search flex-center-between">
        <input :class="{error:isWarning} " v-model="keyWord" type="text" placeholder="请输入标书/文档名/分类名称">
        <div v-if="isWarning" class="tips">搜索内容不能为空</div>
        <a href="javascript:void (0)" v-debounce="submit">查询文档</a>
        <a class="dz" href="javascript:void (0)">联系客服</a>
      </div>
      <p class="rmwd" v-if="searchHistory.length>0">历史搜索:
        <a href="javascript:void (0)" v-for="(item,index) in searchHistory" @click="getKeyWord(item)" :key="index">{{ item }}</a>
        <a href="javascript:void (0)" v-debounce="deleteList" style="color: #ee0a24">
          <i class="el-icon-delete"></i>
        </a>
      </p>


    </div>

  </div>
</template>

<script>
import {getItem, removeItem, setItem} from "@/utils/auth";
import {homeSearch} from "@/api/apiFox";

  export default {
    data(){
      return{
        keyWord:'',
        isWarning:false,
        searchHistory:[]
      }
    },
    methods:{
      deleteList(){
        this.searchHistory=[]
        removeItem('history')
      },
      getKeyWord(item){
        this.keyWord = item
        this.search()
      },
      submit(){
        if (this.keyWord===''){
         this.isWarning = true
        }else{
          this.isWarning = false
          let reg = RegExp(this.keyWord)
          if (reg.test(...this.searchHistory)){
              this.search()
          }else{
            this.searchHistory.unshift(this.keyWord)
            setItem('history',this.searchHistory)
            this.search()
          }
        }
      },
      search(){
        homeSearch({keyword:this.keyWord}).then(res=>{
          console.log(res)
        }).catch(err=>{})
      }
    },
    mounted() {
      this.searchHistory = getItem('history') || []
    }
  }
</script>

<style scoped lang="scss">
.search{
  width: 100%;
  display: flex;
  justify-content: center;
  .center-box{
    width: 1300px;
   margin-bottom: 20px;
    margin-top: 30px;
    .gg{
      width: 100%;
      height: 200px;
      .left{
        height: 200px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        //img{
        //  height: 120px;
        //  object-fit: contain;
        //}
        .name{
          img{
            height: 100px;
            object-fit: cover;
          }
          font-family: 'OPPOB', sans-serif;
          font-size: 36px;
          display: flex;
          span{
            margin-top: 40px;
            color: #3F3F3F;
          }
        }
        .tip{
          width: 100%;
          font-size: 14px;
          margin-top: -50px;
          text-align: center;
          box-sizing: border-box;
          color: #666666;
        }
      }
      .right{

      }
    }
    .box-search{
      width: 100%;
      height: 70px;
      border-radius: 6px;
      padding: 0 10px;
      box-sizing: border-box;
      position: relative;

      input{
        width: 80%;
        height: 55px;
        font-size: 16px;
        color: #333;
        background: #fff;
        text-indent: 20px;
        border-radius: 6px;

      }
      .error{
        border: 1px solid #ee0a24;
        color: #ee0a24;
      }
      .error::placeholder{
        color: #ee0a24;
      }
      .tips{
        color: #ee0a24;
        font-size: 12px;
        position: absolute;
        bottom: -15px;
        left: 10px;
      }
      input::placeholder{
        color: #666666;
        font-size: 15px;
      }
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
        height: 55px;
        color: #fff;
        font-size: 14px;
        border-radius: 6px;
        margin-left: 20px;
      }
      .dz{
        width: 150px;
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
      }
    }
    .rmwd{
      margin-top: 18px;
      color: #666666;
      text-indent: 20px;
      font-size: 12px;
      a{
        margin: 0 10px;
        color: #999;
      }
    }

  }

}
</style>